<template>
  <div class="approval-container">
    <div style="margin-bottom: 10px">
      <p-radio-group v-model="form.approveStatus">
        <span class="agree mr-15 poros-table-header-required">审批结论</span>
        <!-- prettier-ignore -->
        <p-radio :disabled="disabledAgree" :value="true">
          同意
        </p-radio>
        <!-- prettier-ignore -->
        <p-radio :disabled="disabledRefuse" :value="false">
          驳回
        </p-radio>
      </p-radio-group>
    </div>
    <div style="margin-bottom: 10px">
      <p-form-model :rules="rulesComputed" :model="form">
        <p-form-model-item label="审批意见  " prop="approveOpinion">
          <p-textarea v-model="form.approveOpinion" class="textarea" />
        </p-form-model-item>
      </p-form-model>
    </div>
    <div v-if="hasCopy">
      <span class="mr-15" style="float: left"> 抄送人员 </span>
      <SelectSearchPeople
        style="width: 73vw"
        :value="form.makeCopy"
        value-key="email"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    hasCopy: {
      type: Boolean,
      default: true,
    },
    disabledRefuse: {
      type: Boolean,
      default: false,
    },
    disabledAgree: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        approveStatus: '',
        approveOpinion: '',
        makeCopy: [],
      },
      rulesComputed: {
        approveOpinion: [
          { max: 255, message: '输入的内容过长', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleChange(val) {
      this.form.makeCopy = val;
    },
  },
};
</script>

<style lang="less" scoped>
.approval-container {
  margin-bottom: 20px;
  padding-left: 40px;
  .agree {
    margin-left: -12px;
  }
}
.textarea {
  height: 90px !important;
  width: 73vw;
  resize: none;
}
/deep/ textarea.poros-input {
  max-width: 80vw;
}
/deep/ .poros-form-item {
  display: flex;
}
</style>
